<template>
	<view class="container">
		<!--轮播-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2350817201,1137116540&fm=26&gp=0.jpg"
						class="banner-img"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3545834692,4156954932&fm=26&gp=0.jpg"
						class="banner-img"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=774373677,2313985244&fm=26&gp=0.jpg"
						class="banner-img"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 文档列表 -->
		<view class="list">
			<article-card v-for="item in articleList" :key="item.articleId" :title="item.title"
				:description="item.description" :coverImageUrl="item.coverImageUrl" :views="item.views"
				:createTime="item.createTime" :articleId="item.articleId">
			</article-card>
		</view>
	</view>
</template>

<script>
	import {
		articleList
	} from '@/config/api.js';
	export default {
		data() {
			return {
				articleList: [],
				pageNum: 1
			};
		},
		created() {
			articleList({
				pageNum: 1,
			}).then((res) => {
				this.articleList = res.data
				console.log(res)
				// if (this.pageNum === res.length) {
				// 	uni.showToast({
				// 		title: '已加载完全部数据',
				// 		duration: 2000
				// 	});
				// }
			})
		},
		methods: {
			// 下滑加载更多数据
			getmore() {
				// uni.showNavigationBarLoading();//显示加载动画
				articleList({
					pageNum: this.pageNum
				}).then((res) => {
					this.articleList = [...res.data,...this.articleList]
					console.log('1111', this.articleList)
				})
			}
		},
		onReachBottom() {
			console.log('页面到底部，加载下一页数据')
			this.pageNum ++
			this.getmore()
			console.log(this.pageNum)
		}
	}
</script>

<style lang="scss">
	.swiper-item,
	.banner-img {
		width: 100%;
		height: 100%;
	}
</style>
